<template>
	<view class="qualifications content">
		<view class="idcard card">
			<view class="title">
				<i></i>
				<text>身份证照片</text>
			</view>
			<view class="block flex_r_between">
				<view class="list flex_c">
					<image :src="authInfo.id_card_image_f.image" mode="aspectFill"
						v-if="!Array.isArray(authInfo.id_card_image_f)" @click="onIdcardF"></image>
					<image :src="$util.imgurl('/imgs/technician/index/idcard_back.png')" v-else @click="onIdcardF">
					</image>
					<text>人像面</text>
				</view>
				<view class="list flex_c">
					<image :src="authInfo.id_card_image_z.image" mode="aspectFill" @click="onIdcardZ"
						v-if="!Array.isArray(authInfo.id_card_image_z)"></image>
					<image :src="$util.imgurl('/imgs/technician/index/idcard_forward.png')" v-else @click="onIdcardZ">
					</image>
					<text>国徽面</text>
				</view>
			</view>
		</view>

		<view class="idcard_list">
			<view class="item flex_r_between">
				<text>姓名</text>
				<view>{{authInfo.real_name}}</view>
			</view>
			<view class="item flex_r_between no_border">
				<text>身份证号</text>
				<view>{{authInfo.id_card}}</view>
			</view>

		</view>

		<view class="workcard card">
			<view class="title">
				<i></i>
				<text>从业资格证照片</text>
			</view>
			<image :src="authInfo.seniority_image.image" mode="aspectFill"
				v-if="!Array.isArray(authInfo.seniority_image)" @click="onSeniority"></image>
			<image :src="$util.imgurl('/imgs/technician/index/work_photo.png')" v-else @click="onSeniority"></image>
		</view>

		<view class="health card">
			<view class="title">
				<i></i>
				<text>健康证照片</text>
			</view>
			<view class="block flex_c">
				<image :src="authInfo.health_certificate.image" mode="aspectFill"
					v-if="!Array.isArray(authInfo.health_certificate)" @click="onHealth"></image>
				<image :src="$util.imgurl('/imgs/technician/index/health_photo.png')" v-else @click="onHealth"></image>
			</view>
		</view>

		<button @click="onNext">下一步</button>

	</view>
</template>

<script>
	import http from '@/utils/https.js'
	import md5 from 'js-md5'
	let Base64 = require('js-base64').Base64
	export default {
		data() {
			return {
				authInfo: {
					id_card_image:'',
				},
				id_card_image_f_status: 1,
				id_card_image_z_status: 1,
				seniority_image_status: 1,
				health_certificate_status: 1,
			}
		},
		methods: {
			createSign() {
				let timestamp = Date.parse(new Date()) / 1000
				let last_num = timestamp.toString().slice(-1)
				if (last_num <= 3) {
					last_num = 3;
				} else if (last_num > 3 && last_num <= 6) {
					last_num = 6;
				} else if (last_num > 6 && last_num <= 9) {
					last_num = 9;
				} else {
					last_num = 0;
				}
				let new_str = timestamp.toString().slice(0, 9)
				let md5_str = md5(new_str);
				let str_split = md5_str.split('')
				let new_str_split = str_split.sort()
				return Base64.encode(new_str_split.join("") + '&time=' + timestamp);
			},
			chooseImage() {
				if (this.status == 2 || this.status == 1) {
					return this.$util.msg('已经提交过资料了')
				}
				var that = this
				this.$util.chooseImage({
					count: 1,
				}, res => {
					that.upload('picture', res.tempFilePaths[0], function(result) {
						if (result.code == 0) {
							if (result.data.status == 1) {
								that.authInfo.id_card_image_f = {
									image: result.data.url,
									status: that.id_card_image_f_status
								}
								that.authInfo.id_card_image = result.data.url
								that.authInfo.id_card = result.data.data.face.data.idNumber || ''
								that.authInfo.real_name = result.data.data.face.data.name || ''
								that.authInfo.sex = result.data.data.face.data.sex == '男' ? 1 : 2
							} else {
								return that.$util.msg('请上传正确的身份证')
							}
						} else {
							return that.$util.msg('请上传正确的身份证')
						}
					})
				})
			},
			onIdcardF() {
				let that = this
				if (this.id_card_image_f_status == 2) {
					uni.previewImage({
						urls: [this.authInfo.id_card_image_f.image]
					})
				} else {
					this.chooseImage()
				}
			},
			onIdcardZ() {
				if (this.id_card_image_z_status == 2) {
					uni.previewImage({
						urls: [this.authInfo.id_card_image_z.image]
					})
				} else {
					this.$util.chooseImage({
						count: 1,

					}, res => {
						uni.showLoading({
							title: '上传中',
						})
						this.$util.upload('picture', res.tempFilePaths[0], result => {
							if (result.code == 0) {
								this.authInfo.id_card_image_z = {
									image: result.data.url,
									status: this.id_card_image_z_status,
								}
							}
						}, 1)
					})
				}

			},
			onSeniority() {
				if (this.seniority_image_status == 2) {
					uni.previewImage({
						urls: [this.authInfo.seniority_image.image]
					})
				} else {
					this.$util.chooseImage({
						count: 1,
					}, res => {
						uni.showLoading({
							title: '上传中',
						})
						this.$util.upload('picture', res.tempFilePaths[0], result => {
							if (result.code == 0) {
								this.authInfo.seniority_image = {
									image: result.data.url,
									status: this.seniority_image_status,
								}
							}
						}, 1)
					})
				}

			},
			onHealth() {
				if (this.health_certificate_status == 2) {
					uni.previewImage({
						urls: [this.authInfo.health_certificate.image]
					})
				} else {
					this.$util.chooseImage({
						count: 1,
					}, res => {
						uni.showLoading({
							title: '上传中',
						})
						this.$util.upload('picture', res.tempFilePaths[0], result => {
							if (result.code == 0) {
								this.authInfo.health_certificate = {
									image: result.data.url,
									status: this.health_certificate_status,
								}
							}
						}, 1)
					})
				}
			},
			upload(type, file, callback) {
				uni.showLoading({
					title: '上传中',
				})
				let url = http.baseUrl
				let token = uni.getStorageSync('token')
				try {
					token = uni.getStorageSync('token');
				} catch (e) {
					// error
				}
				uni.uploadFile({
					url: url + '/upload/uploadOcr', //仅为示例，非真实的接口地址
					filePath: file,
					header: {
						'token': token,
						'sign': this.createSign(),
					},
					name: 'file',
					formData: {
						'type': type,
						add_water: 1
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						let res = JSON.parse(uploadFileRes.data)
						if (res.code == 0) {
							if (res.data.status == 1) {
								callback({
									code: 0,
									data: res.data
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				});
			},
			onNext(){
				if(!this.authInfo.id_card_image_z.image || !this.authInfo.id_card_image_f.image || !this.authInfo.seniority_image.image || !this.authInfo.health_certificate.image){
					return this.$util.msg('请将信息填写完整')
				}
				this.request.httpTokenRequest({
					url: "/technician.technician/applyTechnician",
					method: "post"
				}, {
					name:this.authInfo.real_name,
					id_card_image:this.authInfo.id_card_image,
					id_card:this.authInfo.id_card,
					sex:this.authInfo.sex,
					id_card_image_z: JSON.stringify(this.authInfo.id_card_image_z),
					id_card_image_f: JSON.stringify(this.authInfo.id_card_image_f),
					seniority_image: JSON.stringify(this.authInfo.seniority_image),
					health_certificate: JSON.stringify(this.authInfo.health_certificate),
				}).then(res => {
					if (res.code == 0) {
						this.getUserInfo()
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getUserInfo() {
				let that = this
				this.request.httpTokenRequest({
					url: "user/center",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('user', res.data)
						uni.navigateTo({
							url:'/technician/personal/album'
						})
					} else {
						return
					}
				}, error => {})
			},
		},
		onShow() {
			if (uni.getStorageSync('user') && uni.getStorageSync('user').is_service) {
				this.authInfo = uni.getStorageSync('authInfo')
				this.id_card_image_f_status = this.authInfo.id_card_image_f.status ? this.authInfo.id_card_image_f.status :
					1
				this.id_card_image_z_status = this.authInfo.id_card_image_z.status ? this.authInfo.id_card_image_z.status :
					1
				this.seniority_image_status = this.authInfo.seniority_image.status ? this.authInfo.seniority_image.status :
					1
				this.health_certificate_status = this.authInfo.health_certificate.status ? this.authInfo.health_certificate
					.status : 1
				this.authInfo.id_card_image =  this.authInfo.id_card_image_f.image
				this.authInfo.sex = this.authInfo.gender
			} else {
				this.authInfo = {
					id_card_image_f: [],
					id_card_image_z: [],
					seniority_image: [],
					health_certificate: [],
				}
				this.id_card_image_f_status = 1
				this.id_card_image_z_status = 1
				this.seniority_image_status = 1
				this.health_certificate_status = 1
			}

		}
	}
</script>

<style lang="scss" scoped>
	.qualifications {
		padding: 30rpx;
	}

	.idcard_list {
		margin: 30rpx 0;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 30rpx;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			text {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}

			view {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}
		}
	}

	.card {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 37rpx 30rpx 30rpx;
		margin: 30rpx 0;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			i {
				width: 10rpx;
				height: 30rpx;
				background: #2E7EFA;
				border-radius: 2rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}

		}
	}

	.idcard {
		.block {
			.list {
				image {
					width: 299rpx;
					height: 198rpx;
				}

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.workcard {
		image {
			width: 100%;
			height: 249rpx;
		}
	}

	.health {
		.block {
			image {
				width: 299rpx;
				height: 198rpx;
			}
		}

	}

	button {
		height: 88rpx;
		background: #2E7EFA;
		border-radius: 44rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		margin-top: 44rpx;
	}
</style>